<!-- 更多停车弹出框 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
      <div class="dy-panel-content">
        <contentTitle :title="'当日车流变化趋势'"/>
        <div class="layChart" ref="drclbhqsRef"></div>
      </div>
      <div class="pd_abItems-contain">
        <div class="pd_abItems-main">
          <div v-for="(item,index) in abItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="abItemsClick(item)">{{item.title}}</div>
        </div>
        <div class="pd-abItem-search">
          <button class="pd-abItem-search-btn">查询</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {drawLine} from "../../../util/chartUtil.js";
import {ajaxRequest} from "../../../api/code.js";

  const emit = defineEmits(['closeChild']);
  const closeCurrent = function (){
    emit('closeChild')
  }
  const areacode = ref(null)
  const abItems = ref([{title:'综合',clazz:'selected'},{title:'东(南)',clazz:''},{title:'西(北)',clazz:''}])
  const abItemsClick = function (item){
    abItems.value.forEach((res,i)=>{
      res.clazz = res.title === item.title?'selected':"";
    })

    if(item.title === '综合'){
      areacode.value = null
    }
    else if(item.title === '东(南)'){
      areacode.value = "01"
    }
    else if(item.title === '西(北)'){
      areacode.value = "02"
    }
    //分区切换刷新数据
    refreshData()

  }

  const drclbhqsRef = ref();
  let xData = ref([]);
  const yData = ref([]);

  for (let i = 0;i < 24;i++){
    xData.value.push((i > 9? i:'0'+i) + ':00');
  }
  const drclbhqsOpt = ref({
    color: ['#F44538'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: '',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      top: '25%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: xData.value,
        axisLine: { // 设置轴线样式
          lineStyle: {
            color: 'rgba(39,163,212)' // 设置轴线颜色
          }
        },
        axisTick:{
          show: false
        },
        axisLabel: {
          interval:0,
          rotate:45,
          textStyle: {
            color: 'white',
            fontSize: 12
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: "辆",
        nameTextStyle: {
          color: "#FFF",
          nameLocation: "end",
          padding:[0,0,0,-15]
        },
        axisLabel: {
          textStyle: {
            color: 'white'
          }
        },
        axisLine: { // 设置轴线样式
          lineStyle: {
            color: 'rgba(39,163,212,0.52)' // 设置轴线颜色
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(39,163,212,0.52)',
            type: 'dashed',
          }
        },
      }
    ],
    series: [
      {
        name: "",
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 4
        },
        showSymbol: false,
        emphasis: {
          focus: 'series'
        },
        data: yData.value
      }
    ]
  });
  let drclbhqsChart;
  onMounted(()=>{
    drclbhqsChart = drawLine(drclbhqsRef.value,drclbhqsOpt.value);
    refreshData()
  });


 async function refreshData() {
  yData.value = []
  const params = {
    areacode: areacode.value
  }
  const res = await ajaxRequest('post', 'getParkingDrclbhqs', params)
  if (res.data) {
    res.data.forEach((item,index)=>{
      yData.value[parseInt(item.hour)] = item.cnt
    })
    drclbhqsOpt.value.series[0].data = yData.value
  }
  drclbhqsChart.setOption(drclbhqsOpt.value)
}
</script>

<style scoped>
.dy-panel{
  position: fixed;
  top: 10vh;
  width: 100%;
  .dy-panel-main{
    background: rgba(5, 36, 44, 0.9);
    width: 80vh;
    min-height: 50vh;
    margin: 0 auto;
    padding-right: 2.5vh;
    padding-bottom: 2.5vh;
    position: relative;
    .dy-panel-header{
      height: 3vh;
      .dy-panel-close{
        position: absolute;
        height: 2.6vh;
        width: 2.6vh;
        background-image: url("../../../assets/img/public/关闭.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        right: 1vh;
        top: 2vh;
        cursor: pointer;
      }
    }
    .dy-panel-content{
      display: flex;
      padding: 1vh;
      flex-wrap: wrap;
    }
  }
}
.pd_abItems-contain{
  display: flex;
  justify-content: center;
  margin-top: 2vh;
  .pd_abItems-main{
    display: flex;
    border: 1px solid #FFFFFF;
    margin-right: 2vh;
    .pd_abItem-item{
      padding: 0.5vh 1.2vh;
      border-right: 1px solid #FFFFFF;
      cursor: pointer;
      font-size: 1.4vh;
    }
    .selected{
      background: #35CB9C;
      border: 1px solid #35CB9C;
    }
  }
  .pd-abItem-search{
    .pd-abItem-search-btn{
      border: none;
      background: #35CB9C;
      padding: 0.5vh 1.2vh;
      color: #FFFFFF;
      cursor: pointer;

    }
  }
}

</style>